<template>
  <div class="order-info">
    <Header title="订单详情" isLeft="true"/>
    <div class="order">
      <div class="delivered">订单已送达</div>
      <div class="border"></div>
      <div class="grateful">感谢您对饿了么的信任，期待再次光临</div>
    </div>

    <div class="good-detail">
      <div class="title">{{orderInfo.shopInfoName}}</div>
      <div class="good">
        <div class="good-list" v-for="(item,index) in orderInfo.orderInfo.selectFoods" :key="index">
          <div class="img"><img :src="item.image_path"></div>
          <div class="name">{{item.name}}</div>
          <div class="count">x{{item.count}}</div>
          <div class="price">{{item.activity.fixed_price}}</div>
        </div>
      </div>
      <div class="peisong">
        <div class="title">配送费</div>
        <div class="title">¥{{orderInfo.orderInfo.shopInfo.delivery_fee_discount}}</div>
      </div>
      <div class="all-price">
        <div class="title"><span>小计：</span> ¥{{orderInfo.totalPrice}}</div>
      </div>
    </div>

    <div class="shipping">
      <div class="info">
        <div class="titles" style="margin-left:0;margin:.3rem 0">配送信息</div>
      </div>
      <div class="info">
        <div class="titles clear" style="margin-left:0;">送达时间：{{orderInfo.date}}</div>
      </div>
      <div class="user-info">
        <div class="titles clear" style="margin-left:0;">送货地址：</div>
        <div class="user">
          <div class="user-name">{{orderInfo.userInfo.name}}</div>
          <div class="user-name">{{orderInfo.userInfo.phone}}</div>
          <div class="user-name">{{orderInfo.userInfo.address}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from '../../components/Myheder'
export default {
  name: 'orderInfo',
  data () {
    return {
      orderInfo: this.$route.params.orderInfo
    }
  },
  created () {
    console.log(this.orderInfo);
  },

 components:{
   Header
 }
}
</script>
<style  scoped>
.order-info {
  overflow: hidden;
}
.order,
.good-detail,
.shipping {
  background-color: #fff;
  margin: 0.3rem;
  padding: 0.3rem;
  border-radius: 0.1rem;
  padding-bottom: 0;
}
.delivered,
.grateful {
  height: 0.6rem;
  line-height: 0.6rem;
  font-weight: 550;
}
.border {
  border-bottom: 0.03rem rgb(224, 223, 223) solid;
  overflow: hidden;
  margin: 0.2rem 0;
}
.grateful {
  font-size: 0.3rem;
  font-weight: normal;
}
.title {
  font-weight: 550;
  font-size: 0.35rem;
}
.img img {
  width: 1rem;
}
.good-list {
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.02rem rgb(228, 226, 226) solid;
}
.good-list div {
  margin: 0.1rem;
  padding: 0.1rem;
}
.name {
  /* margin-right: auto !important; */
  width: 4.6rem;
}
.count {
  margin-right: auto !important;
}
.peisong {
  height: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.02rem solid rgb(231, 230, 230);
  padding: 0 0.3rem;
}
.all-price {
  text-align: right;
  height: 1rem;
  line-height: 1rem;
  /* border-bottom: 0.02rem solid #ccc; */
}
.info {
  margin: 0.3rem 0;
  font-size: 0.35rem;
  font-weight: 550;
  border-bottom: 0.02rem solid rgb(231, 230, 230);
}
.clear,
.user-name {
  font-weight: normal;
  min-width: 2rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: .35rem;
  color: rgb(109, 109, 109);
}
.user-info {
  display: flex;
  min-height: 2.3rem;
}
</style>
